<template>
  <div class="manager-container">
    <el-tabs tab-position="left" class="goods-tabs" model-value="GoodsManage">
      <el-tab-pane   class="goods-item" v-for="(item,index) in goodsItems" :label="item.label" :name="item.name" :key="index">
        <div v-if="item.name === 'GoodsManage'"  ><GoodsManage ref="goodsManage" /></div>
        <div v-if="item.name === 'GoodsAdd'"  >
          <!-- 暴露出刷新方法 goodsFlush -->
          <GoodsAdd @goodsFlush="goodsManageFlush" /></div>
        <div v-if="item.name === 'GoodsBigAdd'" >

          <GoodsBigAdd  /></div>
      </el-tab-pane>
    </el-tabs>
    <div class="big">
    </div>
  </div>
</template>

<script setup>
import GoodsBigAdd from './GoodsBigAdd.vue'
import GoodsAdd from './GoodsAdd.vue'
import GoodsManage from './GoodsMange.vue'
import {onMounted, provide, ref} from "vue";

let goodsManage = ref();
let emits = defineEmits(['goodsFlush'])

// 刷新 GoodsMange 组件的数据
const goodsManageFlush = ()=>{
  // emits('goodsFlush')
  goodsManage.value[0].get_goods_all();
}
// 左侧菜单栏数组
const goodsItems = ref( [ {'label':'商品管理','name':'GoodsManage'}, {'label':'商品添加','name':'GoodsAdd'}, {'label':'商品分类管理','name':'GoodsBigAdd'},]);

onMounted(()=>{

})
defineExpose({goodsManageFlush})
</script>

<style scoped lang="scss">
.manager-container {
  width:calc(100% - 1px);

  .goods-tabs{
    width: 98vw;
    height: calc(100vh - 55px);
    :deep(.el-tabs__item){
      height: 50px;
      font-size: 16px;
    }
    :deep(.el-tabs__content){
      height: 100% !important;
    }
  }

}

</style>